<template>
<div>
	<h3 class="base-title">消息提示</h3>
	<p class="base-content">当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。</p>

	<div class="demo-block" :class="{'show-case-core':caseObj1.showCoreFlag}">
		<div class="demo-block-source">
			<bh-button type='primary' @click='open1()'>按钮1</bh-button>
			<bh-button type='success' @click='open2()'>按钮2</bh-button>
			<bh-button type='success' @click='open3()'>按钮3</bh-button>
		</div>
		<div class="demo-block-core">
			<textarea class="demo-core-box" readonly="readonly" v-model="caseSourceVal" style='height: 700px;'></textarea>
		</div>
		<div class="demo-block-footer">
			<div class="demo-ms-arr" @click='toggleDemoCore(caseObj1)'>
				<span class="demo-ms-s">显示代码</span>
				<span class="demo-ms-h">隐藏代码</span>
			</div>
			<a :href="caseObj1.coreUrl" target="_blank" class="demo-online" title="前往 codepen.io 运行此示例">在线运行</a>
		</div>
	</div>
</div>
</template>

<script>
const caseSourceVal = `
<template>
<bh-button type='primary' @click='open1()'>按钮1</bh-button>
<bh-button type='success' @click='open2()'>按钮2</bh-button>
<bh-button type='success' @click='open3()'>按钮3</bh-button>
</template>
export default {
		open1() {
			this.$alert('这是一段内容', '标题名称', {
				confirmButtonText: '确定',
				callback: (action) => {
					console.log(11, action);
				}
			});
		},
		open2() {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				//type: 'warning',
				resolve: function(action) {
					console.log('confirm-1', action);
				},
				reject: function(action) {
					console.log('confirm-2', action);
				},
			}).then(() => {
				console.log(1122);
			}).catch(() => {
				console.log(1122);          
			});
		},
		open3() {
			this.$prompt('请输入邮箱', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				resolve: function(action, inputValue) {
					console.log('prompt-1', action, inputValue);
				},
				reject: function(action, inputValue) {
					console.log('prompt-2', action, inputValue);
				},
			}).then(({ value }) => {
				console.log('prompt-1', value);
			}).catch((action) => {
				console.log('prompt-1', action);   
			});
		},
	},
}
`;
export default {
	data () {
		return {
			caseObj1: {
				showCoreFlag: false,
				coreUrl: 'https://codepen.io/xiebaolin/pen/BadNRjG',
			},
			caseSourceVal: caseSourceVal,
		};
	},
	methods: {
		// 切换代码显隐
		toggleDemoCore (item) {
			item.showCoreFlag = !item.showCoreFlag;
		},

		open1() {
			this.$alert('这是一段内容', '标题名称', {
				confirmButtonText: '确定',
				callback: (action) => {
					console.log(11, action);
				}
			});
		},
		open2() {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				//type: 'warning',
				resolve: function(action) {
					console.log('confirm-1', action);
				},
				reject: function(action) {
					console.log('confirm-2', action);
				},
			}).then(() => {
				console.log(1122);
			}).catch(() => {
				console.log(1122);          
			});
		},
		open3() {
			this.$prompt('请输入邮箱', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				resolve: function(action, inputValue) {
					console.log('prompt-1', action, inputValue);
				},
				reject: function(action, inputValue) {
					console.log('prompt-2', action, inputValue);
				},
			}).then(({ value }) => {
				console.log('prompt-1', value);
			}).catch((action) => {
				console.log('prompt-1', action);   
			});
		},
	},
}
</script>

<style scoped>
</style>
